<template>
    <div class="box" ref="box">
        <el-form ref="form" :inline="true" :model="form" class="demo-form-inline">
            <el-form-item v-for="(item, index) in formData" :key="index" :label="item.type != 'btn' ? item.label : ''">
                <template v-if="item.type == 'string'">
                    <el-input size="small" v-model="form[item.key]" :placeholder="'请输入' + item.label"></el-input>
                </template>
                <template v-else-if="item.type == 'number'">
                    <el-input v-model.number="form[item.key]" size="small" :placeholder="'请输入' + item.label"></el-input>
                </template>
                <template v-else-if="item.type == 'date'">
                    <el-date-picker size="small" v-model="form[item.key]" format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                    </el-date-picker>
                </template>
                <template v-else-if="item.type == 'date_range'">
                    <el-date-picker v-model="form[item.key]" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </template>
                <template v-else-if="item.type == 'select'">
                    <el-select size="small" v-model="form[item.key]" :placeholder="'请选择' + item.label">
                        <el-option v-for="(s_item, s_index) in item.set" :key="s_index" :label="s_item.label"
                            :value="s_item.value">
                        </el-option>
                    </el-select>
                </template>
                <template v-else-if="item.type == 'checkbox'">
                    <el-checkbox-group v-model="form[item.key]">
                        <el-checkbox v-for="(c_item, c_index) in item.set" :key="c_index" :label="c_item"></el-checkbox>
                    </el-checkbox-group>
                </template>
                <template v-else-if="item.type == 'btn'">
                    <el-button v-if="item.key == 'search'" size="small" :type="item.style" @click="onSubmit">{{ item.label
                    }}</el-button>
                    <el-button v-else-if="item.key == 'select'" size="small" :type="item.style" @click="onSelect">{{
                        item.label }}</el-button>
                </template>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        formData: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    created() {
        if (this.formData.length != 0) {
            this.formData.forEach(item => {
                console.log(item);
                if (item.type == "checkbox") {
                    this.$set(this.form, item.key, [])
                } else if (item.type == "date_range") {
                    this.$set(this.form, item.key, [])
                } else {
                    this.$set(this.form, item.key, "")
                }
            });
            // console.log(this.form);
        }
    },
    mounted() {
        // window.addEventListener("resize", () => {
        //     this.windowChange()
        // });
        // this.watchWidth()
    },
    data() {
        return {
            form: {},
            hidden: false,
        }
    },
    methods: {
        onSubmit() {
            this.$emit("handelSearch", this.form)
        },
        onSelect() {
            this.$emit("handelSelect", '')
        },
        windowChange() {
            this.$nextTick(() => {
                console.log(this.$refs.box.scrollWidth);
                console.log(this.$refs.form.$el.offsetWidth);
                let boxWidth = this.$refs.box.scrollWidth
                let formWidth = this.$refs.form.$el.offsetWidth
                if ((formWidth + 40) == boxWidth) this.hidden = true
                else if ((formWidth + 40) < boxWidth) this.hidden = false
            })
        },
        watchWidth() {
            const resizeObserver = new ResizeObserver(entries => {
                // entries 是一个包含被观察元素的数组
                for (let entry of entries) {
                    // entry.contentRect.width 包含了被观察元素的宽度
                    // console.log('元素宽度变化：', entry.contentRect.width);
                    console.log('元素宽度变化：', entry);
                }
                // let formWidth = entries[0].contentRect.width
                // let boxWidth = entries[1].contentRect.width
                // if (formWidth == boxWidth) {
                //     this.hidden = true
                // } else {
                //     this.hidden = false
                // }
            });

            // 开始观察myElement元素的变化
            resizeObserver.observe(this.$refs.form.$el);
            resizeObserver.observe(this.$refs.box);

            // 在组件销毁时停止观察，防止内存泄漏
            this.$once('hook:beforeDestroy', () => {
                resizeObserver.disconnect();
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 20px;
}
</style>